﻿var perline = 18;
var divSet = false;
var curId;
var returnId;
var grayLevels = Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
var colorLevels = Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'AA', 'BB', 'CC', 'DD', 'EE', 'FF');
var colorArray = Array();
var timer = 0;
var ie = false;
var nocolor = 'none';
if (document.all) { ie = true; nocolor = '#000000'; }

function getObj(id) {
  if (ie) { return document.all[id]; } 
  else {	return document.getElementById(id);	}
}

function addColor(r, g, b) {
  var red = colorLevels[r];
  var green = colorLevels[g];
  var blue = colorLevels[b];
	
  colorArray[colorArray.length] = '#' + red + green + blue;
}

function addGray(r1,r2,g1,g2,b1,b2) {     	
  colorArray[colorArray.length] = '#' + grayLevels[r1] + grayLevels[r2] + grayLevels[g1] + grayLevels[g2] + grayLevels[b1] + grayLevels[b2];
}

function displayColor(color) {
  var display = getObj("currentDisplay");
  var dark = getObj("currentDark");
  var light = getObj("currentLight");

  display.style.backgroundColor = color;
  dark.innerHTML = color;
  light.innerHTML = color;	   
}

function setColor(color) {
  var link = getObj(curId);
  var field = getObj(returnId);
  var picker = getObj('colorpicker');
    
  field.value = color;

  if (color == '') {
 	link.style.background = nocolor;
 	link.style.color = nocolor;
 	color = nocolor;
  } else {
 	link.style.background = color;
	link.style.color = color;
  }

  if (ie) {
    var frame = getObj('colorframe'); 
    frame.style.display = 'none';
  }
  
  picker.style.display = 'none';  
  field.focus();
}
  
function setDiv() {   
  if (!document.createElement) { return; }
  var elemDiv = document.createElement('div');
  if (typeof(elemDiv.innerHTML) != 'string') { return; }
  
  genColors();
  
  elemDiv.id = 'colorpicker';
  elemDiv.style.position = 'absolute';
  elemDiv.style.display = 'none';
  elemDiv.style.border = '1px solid #000';
  elemDiv.style.background = '#fff';
  elemDiv.style.width = '199px';
  
  elemDiv.innerHTML = ''
  	+ getColorTable()
  	+ '<div id="currentDisplay" style="text-align:center;width:100%;">'
  	+ '<span id="currentDark" style="color:#000;font:normal 8pt Verdana;text-align:center;"></span>'
  	+ '&nbsp;&nbsp;&nbsp;&nbsp;'
  	+ '<span id="currentLight" style="color:#fff;font:normal 8pt Verdana;text-align:center;"></span>'
  	+ '</div>';
  
  if (ie) {	
	var elemIframe = document.createElement('iframe');
	elemIframe.src = 'javascript:false';
	elemIframe.id = 'colorframe';
	elemIframe.style.display = 'none';
	elemIframe.style.position = 'absolute';
	elemIframe.frameBorder = '0';
	elemIframe.scrolling = 'no';
	elemIframe.width = '201px';
	elemIframe.height = '175px';        
	document.body.appendChild(elemIframe);
  }

  document.body.appendChild(elemDiv);
  divSet = true;
}

function pickColor(id,returnTo) {
  if (!divSet) { setDiv(); }
  var picker = getObj('colorpicker');     	
	     	
  if (id == curId && picker.style.display == 'block') {
	if (ie) {
	  var frame = getObj('colorframe');  
	  frame.style.display = 'none';
	}
	
	picker.style.display = 'none';	
	return;
  }

  curId = id;
  returnId = returnTo;
  
  var thelink = getObj(id);
	
  picker.style.top = getAbsoluteOffsetTop(thelink) + 20 + "px";
  picker.style.left = getAbsoluteOffsetLeft(thelink) + "px";     
  picker.style.display = 'block';		
			
  if (ie) {
    var frame = getObj('colorframe');  

    frame.style.top = getAbsoluteOffsetTop(thelink) + 20 + "px";
    frame.style.left = getAbsoluteOffsetLeft(thelink) + "px";     
    frame.style.display = 'block';	
  }
  
  displayColor(getObj(returnTo).value);
}

function setTimer() {
  timer = setTimeout('hideColors();',100);
}

function clearTimer() {
  clearTimeout(timer);
}

function hideColors() {
  var picker = getObj('colorpicker');
  picker.style.display = 'none';

  if (ie) {
	var frame = getObj('colorframe');
	frame.style.display = 'none';	   
  }

  clearTimer();
}	 

function genColors() {
  for (x = 0; x < 16; x+=3) {
	for (y = 0; y < 16; y+=3) {
	  for (z = 0; z < 16; z+=3) { 
		addColor(x,y,z);
	  }
	}
  }

  for (y = 0; y < 16; y++) {
	addGray(y,y,y,y,y,y);
  }					
 
  colorArray[colorArray.length] = '#FFFFFF'
  colorArray[colorArray.length] = '#FFFFFF'
 
  return colorArray;
}

function getColorTable() {
  var colors = colorArray;
  var tableCode = '';
  tableCode += '<table border="0" bgcolor="#dddddd" cellspacing="1" cellpadding="0" onmouseover="clearTimer();" onmouseout="setTimer();">';
  for (i = 0; i < colors.length; i++) {
	if (i % perline == 0) { tableCode += '<tr>'; }
	tableCode += '<td><a style="border:none;text-decoration:none;" href="javascript:setColor(\'' + colors[i] + '\');" onmouseover="displayColor(\'' + colors[i] + '\');"><div style="background: ' + colors[i] + ';width:10px;height:10px;font-size:7pt;font-family:tahoma;"></div></a></td>';
	if (i % perline == perline - 1) { tableCode += '</tr>'; }
  }
  if (i % perline != 0) { tableCode += '</tr>'; }
  tableCode += '</table>';
  return tableCode;
}

function blockInvalid(obj, e) {
  var key;
  var isCtrl = false;
  var keychar;
  var reg;

  if(window.event) {
	key = e.keyCode;
	isCtrl = window.event.ctrlKey
  } else if(e.which) {
	key = e.which;
	isCtrl = e.ctrlKey;
  }

  // check for backspace or delete, or if Ctrl was pressed
  if (key == null || key == 8 || isCtrl) { return true; }
  
  // accept only valid hex characters
  keychar = String.fromCharCode(key);
  reg = /[\#a-fA-F0-9]/;

  return reg.test(keychar);
}

function relateColor(sourceId,targetId) {
  var link = getObj(targetId);
  var field = getObj(sourceId);
  
  var reg = new RegExp('[^a-fA-F0-9]', 'g');
  var color = field.value.replace(reg, '').toUpperCase();

  if (color == null || color.length < 3) {
    color = '';
  } else if (color.length >= 3 && color.length < 6) {
	color = '#' + color.substr(0,3);
  } else if (color.length >= 6) {
	color = '#' + color.substr(0,6);
  }
  
  if (color == '') {
	link.style.background = nocolor;
	link.style.color = nocolor;
	color = nocolor;
  } else if (color.length == 4 || color.length == 7) {
	link.style.background = color;
	link.style.color = color;
  }
}

function getAbsoluteOffsetTop(obj) {
  var top = obj.offsetTop;
  var parent = obj.offsetParent;
  while (parent != document.body) {
	top += parent.offsetTop;
	parent = parent.offsetParent;
  }
  return top;
}

function getAbsoluteOffsetLeft(obj) {
  var left = obj.offsetLeft;
  var parent = obj.offsetParent;
  while (parent != document.body) {
	left += parent.offsetLeft;
	parent = parent.offsetParent;
  }
  return left;
}